<template>
  <div class="block-box">
    <div class="corner-lb"></div>
    <div class="corner-rb"></div>
    <h3 class="lefttask-title">
      总飞行数据<img class="icon" :src="getImageUrl('leftbg10.png')" alt="" />
    </h3>
    <div class="lefttask-num">
      <div
        class="lefttask-text"
        v-for="(item, index) in taskoverList"
        :key="index"
      >
        <div class="lefttask-con">
          <p>{{ item.number }}</p>
          <p class="lefttask-con-tit">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import { dividerProps } from "element-plus";
import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
const props = defineProps({ taskoverList: Array });
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href;
};
</script>
<style lang="scss" scoped>
.block-box {
  background: rgb(2 19 20 / 52%);
  border: 1px solid;
  border-image: radial-gradient(
      circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)
    )
    1 1;
  height: 24vh;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .lefttask-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, "PingFang SC";
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(
      ellipse 140% 300% at 100% 50%,
      rgba(1, 34, 35, 0.2) 28%,
      rgba(7, 217, 221, 0.7) 100%
    );

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }

  .lefttask-num {
    display: flex;
    align-items: center;
    height: 20vh;
    width: 100%;

    .lefttask-text {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 33%;
      // height: 8rem;
      margin: 0 auto;
      height: 13vh;
      background-image: url("../../../../../assets/dp_fxsj_bg1.png");
      background-size: 100% 100%;
    }

    .lefttask-con {
      font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
      font-weight: bold;
      font-size: 2.5vh;
      color: #24e5f1;
      text-align: center;

      .lefttask-con-tit {
        margin-top: 1.5vh;
        font-size: 1.5vh;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 1.5vh;
      }
    }
  }
}
</style>
